<template>
  <div
    v-loading="loading"
    :class="config.windowSize == 0 ? 'card_group min' : config.windowSize == 1 ? 'card_group mid' : 'card_group big'"
  >
    <div class="cardShow">
      <header>
        <el-tooltip :content="config.name" placement="top-start">
          <span>{{config.name}}</span>
        </el-tooltip>
        <span class="tools">
          <!--表格类型，有对比时间-->
          <el-select
            size="mini"
            v-if="tableType === 2 && config.chartType === 2"
            v-model="tableSelectDate"
            @change="handleChangeTableDate"
            class="select-date-content"
          >
            <el-option v-for="item in tableDateItems" :key="item" :value="item" :label="item"></el-option>
          </el-select>
          <!--图表、表格类型-->
          <el-select
            size="mini"
            v-model="selectType"
            v-if="dateSelectBool && config.windowSize != 0"
            class="select-type-content"
          >
            <el-option
              v-for="item in dateSelectItems"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>

          <!--漏斗-->
          <template v-if="config.chartType == 4">
            <span
              v-for="item in funnelSelectItems"
              :key="item.value"
              style="cursor: pointer; padding: 0 3px;"
              :class="{'link-none': funnelSelectValue == item.value}"
              @click="handleChangeFunnelType(item)"
            >{{item.label}}</span>
          </template>
          <!-- <i @click="dialog_save = true" class="el-icon-setting"></i> -->
          <el-dropdown @command="command_change" v-if="config.chartType !== 4">
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon-more"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="0" :disabled="config.chartType !== 3">小</el-dropdown-item>
              <el-dropdown-item :command="1">中</el-dropdown-item>
              <el-dropdown-item :command="2">大</el-dropdown-item>
              <el-dropdown-item :command="4">设置</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </header>
      <header>
        <span class="time-range">{{startDate + " 至 " + endDate}}</span>

        <!--漏斗分析：对比时间选项-->
        <div
          class="selected-box"
          :class="config.windowSize == 1 ? 'selected-box-small' : ''"
          v-if="funnelSelectValue === 'overview' &&
					contrastFunnel.opts.length > 0"
        >
          <el-select
            size="mini"
            value-key="ind"
            @change="contrastChange"
            v-model="contrastFunnel.selecteds[0]"
          >
            <el-option
              v-for="item in contrastFunnel.opts"
              :key="item.ind"
              :value="item"
              :label="item.name"
              :title="item.name"
            ></el-option>
          </el-select>

          <span class="vs">VS</span>

          <el-select
            size="mini"
            value-key="ind"
            @change="contrastChange"
            v-model="contrastFunnel.selecteds[1]"
          >
            <el-option
              v-for="item in contrastFunnel.opts"
              :key="item.ind"
              :value="item"
              :label="item.name"
              :title="item.name"
            ></el-option>
          </el-select>
        </div>
      </header>
      <section class="card-sec">
        <template v-if="info.visible">
          <div class="dashboard-number-container">
            <div class="dq_time">{{info.date}}</div>
            <div class="main-number-content">
              <div class="cont">
                <span>{{info.count}}</span>
                次
              </div>
              <!-- 环比、同比-->
              <!--<div class="compare-number-content">
                <div>
                  环比
                  <span :class="config.hb>0?'status_green':'status_red'">
                    <i :class="config.hb>0?'el-icon-caret-top':'el-icon-caret-bottom'"></i>
                    {{config.hb}}%
                  </span>
                </div>
                <div>
                  同比
                  <span :class="config.tb>0?'status_green':'status_red'">
                  <i :class="config.tb>0?'el-icon-caret-top':'el-icon-caret-bottom'"></i>
                  {{config.tb}}%
                  </span>
                </div>
              </div>-->
            </div>
          </div>
        </template>

        <template v-if="config.chartType != 3">
          <!--					<div class="chart-content">-->
          <!-- 2-表格 -->
          <div
            v-show="config.chartType == 2"
            class="table-content"
            :style="{height: info.visible ? '3.9rem' : '5rem'}"
          >
            <el-table
              size="mini"
              border
              :header-cell-style="{background:'#f2f8ff'}"
              :data="tableData"
              height="100%"
              style="width: 100%;"
            >
              <el-table-column
                v-for="item in tableColumn"
                :show-overflow-tooltip="true"
                :sortable="item.sortable"
                :min-width="item.width"
                :key="item.prop"
                :prop="item.prop"
                :label="item.label"
              >
                <template slot-scope="scope">{{scope.row[item.prop] || "--"}}</template>
              </el-table-column>
            </el-table>
          </div>

          <!--4-漏斗-->
          <div
            class="funnel-content"
            v-show="config.chartType == 4"
            v-loading="funnelLoading"
            :style="{height: info.visible ? '3.9rem' : '5rem'}"
          >
            <!-- 趋势 视图 start -->
            <el-row
              :gutter="40"
              v-if="funnelSelectValue === 'trends' && funnelReportResData.funnelDetail"
            >
              <template v-if="config.windowSize == 2">
                <el-col :span="12">
                  <ViewFunnel
                    :funnelReportResData="funnelReportResData"
                    :windowSize="config.windowSize"
                  ></ViewFunnel>
                </el-col>
                <el-col :span="12">
                  <div :id="'chart_funnel' + config.id" class="chart"></div>
                </el-col>
              </template>
              <template v-if="config.windowSize == 1">
                <el-col :span="24">
                  <div :id="'chart_funnel' + config.id" class="chart"></div>
                </el-col>
              </template>
            </el-row>
            <!-- 趋势 视图 end -->

            <!-- 对比|漏斗 视图 start -->
            <el-row
              :gutter="40"
              v-if="funnelSelectValue === 'overview' && funnelReportResData.funnelDetail"
            >
              <!-- 对比-左 -->
              <el-col :span="12">
                <ViewFunnel
                  :windowSize="config.windowSize"
                  :funnelReportResData="funnelReportResData"
                  :byValues="contrastFunnel.selecteds[0]"
                ></ViewFunnel>
              </el-col>

              <!-- 对比-右 -->
              <el-col :span="12">
                <ViewFunnel
                  :windowSize="config.windowSize"
                  :funnelReportResData="funnelReportResData"
                  :byValues="contrastFunnel.selecteds[1]"
                ></ViewFunnel>
              </el-col>
            </el-row>
            <!-- 对比 视图 end -->
          </div>

          <!-- 0、1-图形 -->
          <div
            :id="'chart_event' + config.id"
            class="chart-content"
            v-show="config.chartType == 0 || config.chartType == 1"
          ></div>
          <!--					</div>-->
        </template>
      </section>

      <!-- 编辑弹框 -->
      <el-dialog
        top="12vh"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        class="diglog_setting"
        title="设置"
        :visible.sync="dialog_save"
        width="40%"
      >
        <div class="save_config dialog">
          <div class="line">
            <div class="left">图表类型</div>
            <div class="right">
              <template v-for="item in chartList">
                <span
                  :key="item.value"
                  @click="handleChangeChart(item)"
                  :class="{'type_ech': true, 'type_ech_size': true, 'active': dialog_form.chartType === item.value}"
                >{{item.label}}</span>
              </template>
            </div>
          </div>
          <!--<div class="line">
            <div class="left">同时显示</div>
            <div class="right">
              <el-checkbox-group v-model="show_now" :size="size">
                <el-checkbox label="均值"></el-checkbox>
                <el-checkbox label="合计"></el-checkbox>
                <el-checkbox label="同环比"></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>-->
          <div class="line">
            <div class="left">窗口尺寸</div>
            <div class="right">
              <template v-for="item in sizeList">
                <span
                  :key="item.value"
                  :class="{'type_ech': true, 'type_ech_size': true, 'active': dialog_form.windowSize == item.value}"
                  @click="handleChangeSize(item)"
                >{{item.label}}</span>
              </template>
            </div>
          </div>
          <div class="line">
            <div class="left">显示条数</div>
            <div class="right">
              <el-select size="mini" v-model="dialog_form.limit" clearable>
                <el-option
                  v-for="item in limitList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="line">
            <div class="left">备注</div>
            <div class="right big">
              <el-input v-model="config.bz" type="textarea" :rows="3" :size="size"></el-input>
            </div>
          </div>
        </div>
        <span slot="footer" class="diglog_foot">
          <el-button :size="size" @click="dialog_save = false">取 消</el-button>
          <el-button
            :size="size"
            type="primary"
            :disabled="confirmBtnDisabled"
            @click="handleConfirmConfig"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import ElementResize from "@/utils/ElementResize.js";
export default {
  name: "cardShow",
  props: {},
  watch: {},
  created() {},
  mounted() {},
  computed: {},
  components: {
    ViewFunnel
  },
  data() {
    return {};
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

::v-deep .tooltip-container {
  max-height: 60vh;
  overflow: auto;
}

::v-deep .tooltip-content {
  display: flex;

  .name {
    flex-grow: 1;
    margin-right: 10px;

    .name-index {
      margin-right: 5px;
      width: 20px;
      height: 20px;
      display: inline-block;
      line-height: 20px;
      text-align: center;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
    }
  }

  .value {
    width: 80px;
  }
}

::v-deep .pie-tooltip-container {
  .name {
    .name-index {
      width: 10px;
      height: 10px;
      line-height: 10px;
    }
  }
}

::v-deep .cardShow {
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  header {
    width: 98%;
    margin: 0 auto;
    position: relative;

    .select-date-content {
      width: 120px;
      margin-right: 5px;
    }

    .select-type-content {
      input.el-input__inner {
        width: 50px;
        padding: 0 0 0 10px;
        margin-right: 5px;
      }
    }

    .tools {
      margin-top: 5px;
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      padding: 0 0.1rem 0 0;

      .el-icon-more {
        cursor: pointer;
        font-size: 0.26rem;
      }

      .el-icon-more:hover {
        font-weight: 800;
        color: rgba($color: #01b27a, $alpha: 0.8);
      }
    }
  }

  header:nth-child(1) {
    height: 0.5rem;
    text-indent: 0.1rem;
    font-weight: 500;
    line-height: 0.5rem;
  }

  header:nth-child(2) {
    height: 0.5rem;
    line-height: 0.5rem;
    .time-range {
      text-indent: 0.1rem;
      font-size: 10px;
    }
    .selected-box {
      transform: scale(0.95);
      position: absolute;
      right: 0rem;
      top: 0.1em;
      margin-bottom: 0.1rem;
      .vs {
        margin: 0 5px;
        font-size: 12px;
      }

      &.selected-box-small {
        .el-select {
          width: 120px;
        }
      }
    }
  }

  footer {
    width: 98%;
    margin: 0 auto;
    height: 0.5rem;
    font-size: 0.2rem;
    cursor: pointer;
    line-height: 0.5rem;
    padding: 0 0.1rem;

    span {
      margin: 0 0.2rem;
      letter-spacing: 1px;
    }
  }

  .card-sec {
    width: 98%;
    margin: 0 auto;
    /*flex: 1;*/
    flex-grow: 1;
    display: flex;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    // height: calc(100% - 1.3rem);
    .chart-content {
      flex-grow: 1;
      flex-flow: column;
      /*height: 0;*/
      margin: 0.2rem 0;
      overflow-x: hidden;
      overflow-y: auto;
    }
    .table-content {
      /*flex-grow: 1;*/
      margin: 0.2rem 0;
      overflow-x: hidden;
      overflow-y: hidden;
      /*height: 0;*/
      .el-table {
        margin: 0;
        height: 100%;
      }
    }
    .funnel-content {
      margin: 0.2rem 0;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .dq_time {
      width: 100%;
      height: 0.4rem;
      line-height: 0.4rem;
      font-size: 0.2rem;
      color: rgba($color: #909399, $alpha: 0.6);
      text-indent: 0.1rem;
    }

    .cont {
      font-size: 0.2rem;
      text-indent: 0.2rem;
      height: 0.7rem;
      line-height: 0.7rem;

      span {
        font-size: 0.6rem;
        /*line-height: 1rem;*/
        margin-right: 0.2rem;
      }
    }

    .ech {
      width: 100%;
      height: 100%;
    }
  }
}

::v-deep .card_group {
  .compare-number-content {
    font-size: 0.2rem;
    cursor: pointer;
    /*height: 0.5rem;*/
    /*line-height: 0.5rem;*/
    padding: 0 0.1rem;
  }

  &.min {
    .compare-number-content {
      width: 98%;
      margin: 0 auto;

      & > div {
        float: left;

        span {
          margin: 0 0.2rem;
          letter-spacing: 1px;
        }
      }
    }
  }

  &.mid,
  &.big {
    .main-number-content {
      display: flex;
      align-items: center;
    }
  }
}

// 弹窗
::v-deep .diglog_setting {
  .save_config {
    width: 100%;

    .line {
      width: 99%;
      margin: 0.2rem auto;
      display: flex;
      justify-content: space-between;

      .left {
        width: 20%;
        height: 100%;
        text-indent: 10px;
        height: 0.8rem;
        letter-spacing: 2px;
        font-size: 12px;
        display: flex;
        align-items: center;
      }

      .right {
        height: 100%;
        width: 80%;
        min-height: 0.8rem;
        display: flex;
        align-items: center;

        .type_ech {
          cursor: pointer;
          min-width: 0.6rem;
          height: 0.6rem;
          display: inline-block;
          margin: 0 0.2rem 0 0;
          text-align: center;
          line-height: 0.6rem;
          font-size: 10px;
          border-radius: 4px;
          border: 1px solid rgba($color: #e4e7ed, $alpha: 0.8);
          color: rgba($color: #e4e7ed, $alpha: 1);
        }

        .active {
          border: 1px solid rgba($color: #01b27a, $alpha: 0.6);
          color: rgba($color: #01b27a, $alpha: 0.8);
        }

        .type_ech:hover {
          border: 1px solid rgba($color: #01b27a, $alpha: 0.6);
          color: rgba($color: #01b27a, $alpha: 0.8);
        }

        .type_ech_size {
          min-width: 0.8rem;
          height: 0.8rem;
          line-height: 0.8rem;
          padding: 0 3px;
        }
      }

      .big {
        height: 2rem;
      }
    }
  }
}
</style>

<style scoped lang="scss">
.el-container .el-main {
  text-align: center;
  background-color: transparent;
}

.chart {
  width: 100%;
  height: 5rem;
  position: relative;
}
</style>
